خلاقیت های تبلیغاتی را با انتخاب URL API بچرخانید

از Select URL API برای استفاده از فضای ذخیره‌سازی مشترک استفاده کنید تا مشخص کنید کاربر چه خلاقیتی را در سایت‌ها می‌بیند.

یک تبلیغ‌کننده یا یک تولیدکننده محتوا ممکن است بخواهد استراتژی‌های مختلف چرخش محتوا را برای یک کمپین اعمال کند و محتوا یا خلاقیت‌ها را برای افزایش اثربخشی بچرخاند. از Select URL API می‌توان برای اجرای استراتژی‌های چرخش مختلف، مانند چرخش متوالی و چرخش با توزیع یکنواخت، در سایت‌های مختلف استفاده کرد.

با چرخش خلاقانه Select URL API، می‌توانید داده‌هایی مانند شناسه خلاقیت، تعداد بازدیدها و تعامل کاربر را ذخیره کنید تا مشخص کنید کاربران خلاق در سایت‌های مختلف کدام یک را می‌بینند.

برای اطلاعات بیشتر در مورد API اساسی و نحوه عملکرد انتخاب، مستندات Select URL API را کاوش کنید .

چرخش خلاقانه را امتحان کنید

برای آزمایش چرخش خلاق، مطمئن شوید که Select URL API و Shared Storage فعال هستند:

  • در chrome://settings/content/siteData ، Allow sites to save data on your device یا Delete data sites have saved to your device when you close all windows انتخاب کنید.
  • در chrome://settings/adPrivacy/sites ، Site-suggested ads انتخاب کنید.

نسخه نمایشی زنده ذخیره‌سازی مشترک ما را برای نسخه زنده نمونه‌های کد موجود در این سند امتحان کنید.

نسخه ی نمایشی با نمونه کد

در این مثال:

  • creative-rotation.js اسکریپت شخص ثالثی است که محتوایی را که باید چرخانده شود، به همراه هر داده ای که محتوای بعدی را برای انتخاب و نمایش تعیین می کند، مانند وزن ها در این مثال، تعریف می کند. صفحه ناشر این اسکریپت را اجرا می کند. این اسکریپت Worklet ذخیره‌سازی مشترک را فراخوانی می‌کند تا مشخص کند کدام محتوا را بر اساس داده‌های موجود در فضای ذخیره‌سازی و فهرست URL‌های انتخابی نمایش می‌دهد.

  • creative-rotation-worklet.js Worklet ذخیره سازی مشترک شخص ثالث است که استراتژی چرخش را جستجو می کند، محتوای بعدی را محاسبه می کند و آن قطعه از محتوا را برمی گرداند.

نحوه عملکرد نسخه ی نمایشی

  1. وقتی کاربر از صفحه ناشر بازدید می کند، صفحه اسکریپت creative-rotation.js شخص ثالث را بارگیری می کند. اسکریپت چرخش خلاق مسئول بارگیری و اجرای Worklet ذخیره سازی مشترک است. این اسکریپت تماس Worklet را با لیستی از URL ها برای انتخاب فراهم می کند.
  2. در ورکلت، اگر فضای ذخیره‌سازی مشترک هنوز راه‌اندازی نشده باشد، فضای ذخیره‌سازی با استراتژی چرخش خلاق اولیه و شاخص خلاقیت مقداردهی اولیه می‌شود. استراتژی چرخش اولیه استفاده شده در این دمو، استراتژی متوالی است.
  3. Worklet حالت چرخش را از فضای ذخیره‌سازی مشترک می‌خواند و فهرست آگهی بعدی را برمی‌گرداند. در مورد حالت چرخش متوالی، همچنین فهرست خلاق در فضای ذخیره‌سازی مشترک را با مقدار جدیدی که برای تماس بعدی استفاده می‌شود، به‌روزرسانی می‌کند. Worklet یک FencedFrameConfig یا شی URN غیرشفاف را بر اساس مقدار resolveToConfig که هنگام فراخوانی selectURL استفاده می‌شود، برمی‌گرداند.
  4. اسکریپت چرخش خلاق، تبلیغ انتخاب شده را در یک قاب حصاردار یا iframe نمایش می دهد. برای جزئیات بیشتر در مورد انواع بازگشت، به رندر سند آگهی مراجعه کنید.
  5. هنگامی که کاربر حالت چرخش را تغییر می‌دهد، Worklet ذخیره‌سازی مشترک مقدار حالت چرخش خلاق ذخیره شده در فضای ذخیره‌سازی مشترک را به‌روزرسانی می‌کند.
  6. هنگام بارگیری مجدد صفحه ناشر، مراحل 1-4 تکرار می شود تا انتخاب آگهی بعدی بر اساس استراتژی چرخش انتخابی مشاهده شود.

نمونه کد

در زیر نمونه کد برای creative-rotation.js و creative-rotation-worklet.js آمده است.

creative-rotation.js

const contentProducerUrl = 'https://your-server.example';

// Ad config with the URL of the ad, a probability weight for rotation, and the clickthrough rate.
const DEMO_AD_CONFIG = [
  {
    url: `${contentProducerUrl}/ads/ad-1.html`,
    weight: 0.7,
  },
  {
    url: `${contentProducerUrl}/ads/ad-2.html`,
    weight: 0.2,
  },
  {
    url: `${contentProducerUrl}/ads/ad-3.html`,
    weight: 0.1,
  },
];

async function setRotationMode(rotationMode) {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  await creativeRotationWorklet.run('set-rotation-mode', {
    data: { rotationMode }
  });
  console.log(`creative rotation mode set to ${rotationMode}`);
}

async function injectAd() {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  const urls = DEMO_AD_CONFIG.map(({ url }) => ({ url }));

  // Resolve the selectURL call to a fenced frame config only when it exists on the page
  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';

  // Run the URL selection operation to determine the next ad that should be rendered
  const selectedUrl = await creativeRotationWorklet.selectURL('creative-rotation', urls, {
    data: DEMO_AD_CONFIG,
    resolveToConfig
  });

  const adSlot = document.getElementById('ad-slot');

  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
    adSlot.config = selectedUrl;
  } else {
    adSlot.src = selectedUrl;
  }
}

injectAd();

خلاق-روتاری- worklet.js

class SelectURLOperation {
  async run(urls, data) {
    // Initially set the storage to sequential mode for the demo
    await SelectURLOperation.seedStorage();

    // Read the rotation mode from Shared Storage
    const rotationMode = await sharedStorage.get('creative-rotation-mode');

    // Generate a random number to be used for rotation
    const randomNumber = Math.random();

    let index;

    switch (rotationMode) {
      /**
       * Sequential rotation
       * - Rotates the creatives in order
       * - Example: A -> B -> C -> A ...
       */
      case 'sequential':
        const currentIndex = await sharedStorage.get('creative-rotation-index');
        index = parseInt(currentIndex, 10);
        const nextIndex = (index + 1) % urls.length;

        console.log(`index = ${index} / next index = ${nextIndex}`);

        await sharedStorage.set('creative-rotation-index', nextIndex.toString());
        break;

      /**
       * Evenly-distributed rotation
       * - Rotates the creatives with equal probability
       * - Example: A=33% / B=33% / C=33%
       */
      case 'even-distribution':
        index = Math.floor(randomNumber * urls.length);
        break;

      /**
       * Weighted rotation
       * - Rotates the creatives with weighted probability
       * - Example: A=70% / B=20% / C=10%
       */
      case 'weighted-distribution':
        console.log('data = ', JSON.stringify(data));
        // Find the first URL where the cumnulative sum of the weights
        // exceed the random number. The array is sorted by the weight
        // in descending order.
        let weightSum = 0;
        const { url } = data
          .sort((a, b) => b.weight - a.weight)
          .find(({ weight }) => {
            weightSum += weight;
            return weightSum > randomNumber;
          });

        index = urls.indexOf(url);
        break;

      default:
        index = 0;
    }

    console.log(JSON.stringify({ index, randomNumber, rotationMode }));
    return index;
  }

  // Set the mode to sequential and set the starting index to 0.
  static async seedStorage() {
    await sharedStorage.set('creative-rotation-mode', 'sequential', {
      ignoreIfPresent: true,
    });

    await sharedStorage.set('creative-rotation-index', 0, {
      ignoreIfPresent: true,
    });
  }
}

class SetRotationModeOperation {
  async run({ rotationMode }) {
    await sharedStorage.set('creative-rotation-mode', rotationMode);
  }
}

// Register the operation as 'creative-rotation'
register('creative-rotation', SelectURLOperation);
register('set-rotation-mode', SetRotationModeOperation);

پیاده روی با تصاویر

  1. برای دسترسی به چرخش خلاقیت ها با استفاده از Select URL API و ذخیره سازی اشتراکی، به https://shared-storage-demo.web.app/ بروید. نسخه ی نمایشی "چرخش خلاق" را انتخاب کنید.

  2. برای کشف نسخه ی نمایشی به عنوان "ناشر A" انتخاب کنید. شما به https://shared-storage-demo-publisher-a.web.app/creative-rotation هدایت خواهید شد. صفحه محتوای شماره گذاری شده را بر اساس داده های چرخش خلاق ذخیره شده در فضای ذخیره سازی مشترک بارگیری می کند که از طریق انتخاب URL API قابل دسترسی است. حالت‌های نمایشی برای چرخش خلاقانه، توزیع متوالی، یکنواخت و توزیع وزنی هستند. Worklet منطقی را برای انتخاب محتوایی که در iframe ظاهر می شود اجرا می کند. تصویر زیر صفحه ناشر را نشان می دهد. تصویری که محتویات صفحه را برای Publisher A https://shared-storage-demo-publisher-a.web.app/creative-rotation نشان می‌دهد که حاوی یک فریم با تصویر عدد 1 است، کنترل‌هایی برای انتخاب استراتژی‌های چرخش خلاقانه به‌صورت متوالی، توزیع یکنواخت و توزیع وزنی. همچنین یک ناحیه متنی وجود دارد که استراتژی‌های مختلف چرخش خلاقانه و پیوندهایی به منطق iframe و worklet را توصیف می‌کند.

    یک اسکرین شات صفحه ناشر A را با تصویری از شماره 1 نشان می دهد و کنترل هایی برای انتخاب استراتژی های چرخش خلاقانه دارد.

  3. برای مشاهده آنچه در فضای ذخیره‌سازی مشترک ذخیره شده است، به Application -> Shared Storage در Chrome DevTools بروید. Two entries are created for shared storage. یک فضای ذخیره خالی برای https://shared-storage-demo-publisher-a.web.app مبدا در دسترس است. این شامل فضای ذخیره‌سازی مختص آن مبدا خواهد بود و برای نسخه نمایشی ما خالی می‌ماند زیرا ناشر نیازی به نوشتن در فضای ذخیره‌سازی مشترک ندارد. توجه داشته باشید که وقتی بعداً برای نسخه نمایشی از آن صفحه بازدید کنید، فضای ذخیره‌سازی مشابهی برای ناشر B ایجاد می‌شود. اسکرین شات که ابزارهای برنامه‌نویس کروم را به‌ویژه بخش Application نشان می‌دهد، ورودی‌های فضای ذخیره‌سازی مشترک را برجسته می‌کند و فضای ذخیره‌سازی خالی مبدأ «ناشر A» را نشان می‌دهد https://shared-storage-demo-publisher-a.web.app

    Chrome DevTools فضای ذخیره‌سازی مشترک خالی را برای ناشر A نشان می‌دهد.

  4. یکی دیگر از ورودی‌های ذخیره‌سازی مشترک برای مبدا https://shared-storage-demo-content-producer.web.app ایجاد خواهد شد. این محل ذخیره iframe شخص ثالث است که در صفحه ناشر تعبیه شده است. این فضای ذخیره‌سازی برای به اشتراک گذاشتن داده‌ها بین دو ناشر موجود برای هماهنگی انتخاب خلاقانه استفاده خواهد شد. این فضای ذخیره سازی مشترک برای ذخیره اطلاعات مربوط به استراتژی خلاقیت و چرخش نشان داده شده با ذخیره دو جفت کلید-مقدار استفاده خواهد شد. اولین کلیدی که در نسخه آزمایشی استفاده می‌شود creative-rotation-index است که مقدار آن شاخص خلاق فعلی در حالت متوالی است. کلید دوم creative-rotation-mode است که استراتژی چرخش مورد استفاده را دیکته می کند. تصویری که Devtools کروم را به‌ویژه فضای ذخیره‌سازی مشترک برای مبدا https://shared-storage-demo-content-producer.web.app نشان می‌دهد. فضای ذخیره خالی نیست و دو جفت مقدار کلید ذخیره شده را نشان می دهد. کلید اول creative-rotation-index با مقدار 1 است. دومین کلید ذخیره شده creative-rotation-mode با مقدار "sequential" است.

    یک عکس صفحه‌نمایش فضای ذخیره‌سازی مشترک Chrome DevTools را با دو جفت کلید-مقدار نشان می‌دهد: creative-rotation-index: 1 و creative-rotation-mode: "sequential".

  5. بازخوانی صفحه در حالت متوالی منجر به نمایش خلاقیت بعدی در دنباله 1، 2، 3، 1، ... می شود، مقدار کلید creative-rotation-index با توجه به شاخص خلاقیت نشان داده شده در حالت متوالی تغییر می کند. اسکرین شات صفحه وب «ناشر A» و همچنین DevTools که بخش ذخیره‌سازی مشترک را نشان می‌دهد. خلاقیت در صفحه به عنوان 2 برچسب گذاری شده است، در حالی که مقدار کلید خلاقیت-چرخش-شاخص به عنوان 2 برجسته شده است که با نمایه خلاقیت نشان داده شده مطابقت دارد. Creative-rotation-mode فعلی به صورت متوالی نشان داده می شود.

    اسکرین شات صفحه وب ناشر A و DevTools را نشان می دهد. خلاقیت نشان داده شده 2، خلاقیت-rotation-mode متوالی است، و creative-rotation-index 2 است.

  6. تغییر حالت چرخش خلاق با استفاده از دکمه‌های کنترلی، مقدار حالت چرخش خلاق کلید را در استراتژی مربوطه به‌روزرسانی می‌کند. این توسط کد Worklet برای انتخاب خلاقیت بعدی برای نمایش در iframe استفاده می شود. توجه داشته باشید که مقدار ذخیره شده برای creative-rotation-index برای حالت های چرخش غیر از ترتیبی تغییر نمی کند. اسکرین شات صفحه وب «ناشر A» و همچنین DevTools که بخش ذخیره‌سازی مشترک را نشان می‌دهد. خلاقیت در صفحه به صورت 1 نشان داده می شود. در حالی که برجسته می شود که حالت چرخش خلاق به عنوان توزیع وزنی تنظیم شده است و کنترل مربوطه برای تنظیم حالت چرخش به عنوان توزیع وزنی برجسته می شود. مقدار creative-rotation-index 2 است، اگرچه خلاقیت نشان داده شده 1 است زیرا این شاخص برای حالت های چرخش به غیر از ترتیبی استفاده نمی شود یا به روز نمی شود.

    اسکرین شات صفحه وب ناشر A و DevTools را نشان می دهد. خلاقیت نشان داده شده 1 است، خلاقیت-rotation-mode توزیع وزنی است، و creative-rotation-index 2 است (استفاده نشده).

  7. به صفحه «ناشر B» در https://shared-storage-demo-publisher-b.web.app/creative-rotation بروید. در حالت متوالی، خلاقیت نشان داده شده باید خلاقیت بعدی در ترتیب نشان داده شده هنگام بازدید از URL برای "ناشر A" باشد. با بررسی فضای ذخیره‌سازی مشترک برای تولیدکننده محتوا، می‌توانید متوجه شوید که «ناشر A» و «ناشر B» فضای ذخیره‌سازی یکسانی دارند و از تنظیمات آنجا برای انتخاب خلاقیت بعدی برای نمایش و استراتژی چرخش برای استفاده استفاده می‌کنند. تصویری که صفحه وب «ناشر B» را نشان می‌دهد و همچنین DevTools بخش ذخیره‌سازی مشترک را برای مبدا https://shared-storage-demo-content-producer.web.app نشان می‌دهد. خلاقیت در صفحه به صورت 3 نشان داده می شود. در حالی که شاخص چرخش خلاقیت برجسته 3 است و حالت چرخش خلاق متوالی است.

    صفحه وب ناشر B و Devtools. خلاقیت ذخیره‌سازی مشترک 3، شاخص چرخش خلاقانه 3، و حالت چرخش خلاق متوالی است.

  8. فضای ذخیره‌سازی مشترک «ناشر B»، مشابه فضای ذخیره‌سازی مشترک «ناشر A» خالی است. اسکرین شات که ابزارهای برنامه‌نویس Chrome را به‌ویژه بخش Application نشان می‌دهد، ورودی‌های ذخیره‌سازی مشترک را برجسته می‌کند و فضای خالی منبع «ناشر B» https://shared-storage-demo-publisher-b.web.app را نشان می‌دهد.

    Chrome DevTools فضای خالی مشترک برای ناشر B را نشان می دهد.

    موارد استفاده کنید

    همه موارد استفاده موجود برای Select URL API را می‌توانید در این بخش پیدا کنید. با دریافت بازخورد و کشف موارد آزمایشی جدید، به افزودن نمونه‌ها ادامه خواهیم داد.

مشارکت کنید و بازخورد را به اشتراک بگذارید

توجه داشته باشید که پیشنهاد انتخاب URL API در حال بحث و توسعه فعال است و ممکن است تغییر کند.

ما مشتاقیم نظرات شما را در مورد Select URL API بشنویم.

در جریان باشید

  • فهرست پستی : برای آخرین به‌روزرسانی‌ها و اطلاعیه‌های مربوط به انتخاب URL و APIهای ذخیره‌سازی مشترک، در فهرست پستی ما مشترک شوید.

به کمک نیاز دارید؟